<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片定位与不平铺</title>
    <!--上一个实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。-->
    <!--可以利用 background-position 属性改变图像在背景中的位置:-->
    <style>
        body
        {
            background-image: url("./image/logo.png");
            background-repeat: no-repeat;
            background-position: right top;
            margin-right: 200px;
        }
    </style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置position实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了margin-right属性用于</p>
</body>
</html>